<template>
  <div class="signing">
    <div class="page1" v-show="activeStepIndex === 0">
      <h1>销售模式</h1>
      <div class="radio-sale">
        <radio-group @change="radioChange">
          <label :class="'radio' + (1 + index)" v-for="(item, index) in saleModeArr" :key="index">
            <radio :value="item.value" :checked="index === saleModeIndex" color="#ff5d3d" />{{ item.name }}
          </label>
        </radio-group>
      </div>
      <h1>选择课程</h1>
      <ul class="list-course">
        <li :class="{ 'active': activeIndex == index }" v-for="(item, index) in courseList" :key="index"
          @click="changeIndex(index)">
          <div class="course-body">
            <div class="cover"><img
                :src="item.frontImageFileUrl ? item.frontImageFileUrl : 'https://newmefit.cn/resource/gym/base/base2.jpg'"
                mode="aspectFit"></div>
            <div class="course-info">
              <h4>{{ item.courseName }}</h4>
              <p>{{ item.courseType === 1 ? '私教课' : '自由练' }}</p>
              <p>{{ setCourseMode(item.courseMode) }}</p>
            </div>
          </div>
        </li>
      </ul>
      <div class="footer">
        <span class="next" @click="nextStep(1)">下一步</span>
      </div>
    </div>
    <div class="page2" v-show="activeStepIndex === 1">
      <h1>基础信息</h1>
      <ul class="list-base">
        <!-- 按次 -->
        <li v-if="saleModeIndex === 0">
          <p>
            <span>购买数量</span>
            <input class="uni-input" focus placeholder="购买数量" v-model="ruleForm.buyCount" type="number" />
            <em>节<i class="micon-1"></i></em>
          </p>
        </li>
        <!-- 包时 -->
        <li v-if="saleModeIndex === 1">
          <p>
            <span>购买数量</span>
            <uni-data-select v-if="ruleForm.courseType == 1" style="margin-right: 5rpx;" v-model="ruleForm.buyCount"
              :localdata="buyCountArr" @change="change">
            </uni-data-select>
            <template v-if="ruleForm.courseType == 0">
              <input class="uni-input" focus placeholder="购买数量" v-model="ruleForm.buyCount" type="number" />
              <em>天<i class="micon-1"></i></em>
            </template>

          </p>
        </li>
        <li>
          <p>
            <span>支付金额</span>
            <input class="uni-input" placeholder="支付金额" v-model="ruleForm.payMoney" type="decimal" />
            <em>元<i class="micon-1"></i></em>
          </p>
        </li>
        <li v-if="ruleForm.courseType === 1">
          <p>
            <span>每日约课限制</span>
            <input class="uni-input" placeholder="每日约课限制" v-model="ruleForm.maxAttendClassOneDay" type="number" />
            <em>节<i class="micon-1"></i></em>
          </p>
        </li>
        <li v-if="ruleForm.courseType === 1">
          <p>
            <span>允许约课时间</span>
            <uni-data-select style="margin-right: 5rpx;" v-model="ruleForm.allowAttendClassStartTime"
              :localdata="dateTimeArr" @change="change">
            </uni-data-select>
            <uni-data-select v-model="ruleForm.allowAttendClassEndTime" :localdata="dateTimeArr" @change="change">
            </uni-data-select>
          </p>
        </li>
        <!-- 自由练-按次 -->
        <li v-if="ruleForm.courseType === 0 && saleModeIndex === 0">
          <p>
            <span>门禁容错时间</span>
            <input class="uni-input" placeholder="门禁容错时间" v-model="ruleForm.maxFaultTolerantTime" />
            <em>分<i class="micon-1"></i></em>
          </p>
        </li>
        <li>
          <p>
            <span>课程开始时间</span>
            <uni-data-select style="margin-right: 5rpx;" v-model="ruleForm.expirationType"
              :localdata="signCourseExpirationTypeArr" @change="change">
            </uni-data-select>
          </p>
        </li>
        <li>
          <p>
            <span>课程结束时间</span>
            <input class="uni-input" placeholder="结束时间" v-model="ruleForm.expirationDays" v-if="saleModeIndex === 0"
              type="number" />
            <em v-if="saleModeIndex === 0">天<i class="micon-1"></i></em>
            <em v-if="saleModeIndex === 1">至包时结束<i class="micon-1"></i></em>
          </p>
        </li>
        <li>
          <p>
            <span>选择成交教练</span>
            <mySelectCheckbox v-model="ruleForm.signCoachUserIdList" collapse-tags multiple dataKey="userName"
              dataValue="id" class="mul-select" :localdata="coachArr" @change="change"></mySelectCheckbox>
          </p>
        </li>
        <li v-if="ruleForm.courseType === 1">
          <p>
            <span>选择授课教练</span>
            
            <mySelectCheckbox v-model="ruleForm.teachCoachUserIdList" collapse-tags multiple :max="saleModeIndex == 0 ? 10000 : 1" dataKey="userName"
              dataValue="id" class="mul-select" :localdata="teachCoachArr" @change="change"></mySelectCheckbox>
          </p>
        </li>
        <li>
          <p>
            <span>选择协议</span>
            <uni-data-select style="margin-right: 5rpx;" v-model="ruleForm.protocolConfigId" :localdata="protocolArr"
              @change="change">
            </uni-data-select>
          </p>
        </li>
      </ul>
      <div class="footer">
        <span class="pre-step" @click="nextStep(0)">上一步</span>
        <span class="next-step" @click="nextStep(2)">下一步</span>
      </div>
    </div>
    <div class="page3" v-show="activeStepIndex === 2">
      <h1>会员信息</h1>
      <div class="sec-title">
        会员甲
        <span @click="chooseMember1">从会员中选择</span>
      </div>
      <ul class="list-base">
        <li>
          <p><span>手机号</span><input @change="changeMember1" class="uni-input" type="tel" placeholder="手机号"
              v-model="ruleForm.memberUserIdList[0].phone" /><em><i class="micon-1"></i></em></p>
        </li>
        <li>
          <p><span>姓名</span><input class="uni-input" placeholder="姓名" :disabled="disableMember1"
              v-model.trim="ruleForm.memberUserIdList[0].userName" /><em><i class="micon-1"></i></em></p>
        </li>
        <li>
          <p>
            <span>姓别</span>
            <uni-data-checkbox v-model="ruleForm.memberUserIdList[0].gender" :localdata="genderArr"
              :disabled="disableMember1"></uni-data-checkbox>
          </p>
        </li>
        <li>
          <p><span>身份证号</span><input class="uni-input" placeholder="身份证号" :disabled="true"
              v-model="ruleForm.memberUserIdList[0].idCard" /><em><i class="micon-1"></i></em></p>
        </li>
        <li>
          <p><span>紧急联系人</span><input class="uni-input" placeholder="紧急联系人" :disabled="disableMember1"
              v-model.trim="ruleForm.memberUserIdList[0].emergencyContact" /><em><i class="micon-1"></i></em></p>
        </li>
        <li>
          <p><span style="width:235rpx">紧急联系人手机号</span><input class="uni-input" placeholder="紧急联系人手机号"
              :disabled="disableMember1" v-model="ruleForm.memberUserIdList[0].emergencyContactPhone" /><em><i
                class="micon-1"></i></em></p>
        </li>
      </ul>
      <div class="sec-title" v-if="ruleForm.courseMode === 2">
        会员乙
        <span @click="chooseMember2">从会员中选择</span>
      </div>
      <ul class="list-base" v-if="ruleForm.courseMode === 2">
        <li>
          <p><span>手机号</span><input @change="changeMember2" type="tel" class="uni-input" placeholder="手机号"
              v-model="ruleForm.memberUserIdList[1].phone" /><em><i class="micon-1"></i></em></p>
        </li>
        <li>
          <p><span>姓名</span><input class="uni-input" placeholder="姓名" :disabled="disableMember2"
              v-model.trim="ruleForm.memberUserIdList[1].userName" /><em><i class="micon-1"></i></em></p>
        </li>
        <li>
          <p>
            <span>姓别</span>
            <uni-data-checkbox :localdata="genderArr" v-model="ruleForm.memberUserIdList[1].gender"
              :disabled="disableMember1"></uni-data-checkbox>
          </p>
        </li>
        <li>
          <p><span>身份证号</span><input class="uni-input" placeholder="身份证号" :disabled="true"
              v-model="ruleForm.memberUserIdList[1].idCard" /><em><i class="micon-1"></i></em></p>
        </li>
        <li>
          <p><span>紧急联系人</span><input class="uni-input" placeholder="紧急联系人" :disabled="disableMember2"
              v-model.trim="ruleForm.memberUserIdList[1].emergencyContact" /><em><i class="micon-1"></i></em></p>
        </li>
        <li>
          <p><span style="width:235rpx">紧急联系人手机号</span><input class="uni-input" placeholder="紧急联系人手机号"
              :disabled="disableMember2" v-model="ruleForm.memberUserIdList[1].emergencyContactPhone" /><em><i
                class="micon-1"></i></em></p>
        </li>
      </ul>
      <div class="footer">
        <span class="pre-step" @click="nextStep(1)">上一步</span>
        <span class="next-step" @click="nextStep(3)">下一步</span>
      </div>
    </div>
    <div class="page4" v-show="activeStepIndex === 3">
      <h1>合约预览</h1>
      <div class="contract">
        <div class="contract-top">
          <p><span>课程：</span><em>{{ courseList[activeIndex].courseName }}</em></p>
          <p><span>销售模式：</span><em>{{ saleModeArr[saleModeIndex].name }}</em></p>
          <p><span>购买数量：</span><em>{{ ruleForm.buyCount }}{{ saleModeIndex === 0 ? '节' : '天' }}</em></p>
          <p><span>支付金额：</span><em>{{ ruleForm.payMoney }}元</em></p>
          <p v-if="ruleForm.courseType === 1"><span>每日约课限制：</span><em>{{ ruleForm.maxAttendClassOneDay }}节</em></p>
          <p v-if="ruleForm.courseType === 1"><span>允许约课时间：</span><em>{{ ruleForm.allowAttendClassStartTime }} - {{
            ruleForm.allowAttendClassEndTime }}</em></p>
          <p v-if="ruleForm.courseType === 0 && saleModeIndex === 0"><span>最大门禁容错时间：</span><em>{{
            ruleForm.maxFaultTolerantTime }}分钟</em></p>
          <p v-if="saleModeIndex === 0"><span>课程有效期：</span><em>{{ ruleForm.expirationType === 0 ? '购买后' : '首节课后' }} {{
            ruleForm.expirationDays }} 天</em></p>
          <p v-if="saleModeIndex === 1"><span>课程有效期：</span><em>{{ ruleForm.expirationType === 0 ? '购买后' : '首节课后' }}
              至包时结束</em></p>
          <p><span>成交教练：</span><em>{{ getCoachs(ruleForm.signCoachUserIdList) }}</em></p>
          <p><span>授课教练：</span><em>{{ getCoachs(ruleForm.teachCoachUserIdList) }}</em></p>
          <p><span>协议：</span><em>{{ getProtocolName(ruleForm.protocolConfigId) }}</em></p>
        </div>
        <div class="contract-bottom">
          <h4>会员信息</h4>
          <div class="member">
            <p><span>手机号：</span><em>{{ ruleForm.memberUserIdList[0].phone }}</em></p>
            <p><span>姓名：</span><em>{{ ruleForm.memberUserIdList[0].userName }}</em></p>
            <p><span>性别：</span><em>{{ ruleForm.memberUserIdList[0].gender === 0 ? '女' : '男' }}</em></p>
            <p><span>身份证号：</span><em>{{ ruleForm.memberUserIdList[0].idCard ? ruleForm.memberUserIdList[0].idCard : ''
                }}</em></p>
          </div>
          <div class="member" v-if="ruleForm.courseMode === 2">
            <p><span>手机号：</span><em>{{ ruleForm.memberUserIdList[1].phone }}</em></p>
            <p><span>姓名：</span><em>{{ ruleForm.memberUserIdList[1].userName }}</em></p>
            <p><span>性别：</span><em>{{ ruleForm.memberUserIdList[1].gender === 0 ? '女' : '男' }}</em></p>
            <p><span>身份证号：</span><em>{{ ruleForm.memberUserIdList[1].idCard ? ruleForm.memberUserIdList[1].idCard : ''
                }}</em></p>
          </div>
        </div>
      </div>
      <div class="footer">
        <span class="pre-step" @click="nextStep(2)">上一步</span>
        <span class="next-step" @click="confirmDialog">生成合约</span>
      </div>
    </div>
    <div class="page5" v-show="activeStepIndex === 4">
      <div class="top-banner"></div>
      <div class="qr-code">
        <img :src="item" v-for="(item, index) in payImgArr" :key="index">
      </div>
      <div class="contract">
        <div class="contract-top">
          <p><span>课程：</span><em>{{ courseList[activeIndex].courseName }}</em></p>
          <p><span>销售模式：</span><em>{{ saleModeArr[saleModeIndex].name }}</em></p>
          <p><span>购买数量：</span><em>{{ ruleForm.buyCount }}{{ saleModeIndex === 0 ? '节' : '天' }}</em></p>
          <p><span>支付金额：</span><em>{{ ruleForm.payMoney }}元</em></p>
          <p v-if="ruleForm.courseType === 1"><span>每日约课限制：</span><em>{{ ruleForm.maxAttendClassOneDay }}节</em></p>
          <p v-if="ruleForm.courseType === 1"><span>允许约课时间：</span><em>{{ ruleForm.allowAttendClassStartTime }} - {{
            ruleForm.allowAttendClassEndTime }}</em></p>
          <p v-if="ruleForm.courseType === 0 && saleModeIndex === 0"><span>最大门禁容错时间：</span><em>{{
            ruleForm.maxFaultTolerantTime }}分钟</em></p>
          <p v-if="saleModeIndex === 0"><span>课程有效期：</span><em>{{ ruleForm.expirationType === 0 ? '购买后' : '首节课后' }} {{
            ruleForm.expirationDays }} 天</em></p>
          <p v-if="saleModeIndex === 1"><span>课程有效期：</span><em>{{ ruleForm.expirationType === 0 ? '购买后' : '首节课后' }}
              至包时结束</em></p>
          <p><span>成交教练：</span><em>{{ getCoachs(ruleForm.signCoachUserIdList) }}</em></p>
          <p><span>授课教练：</span><em>{{ getCoachs(ruleForm.teachCoachUserIdList) }}</em></p>
          <p><span>协议：</span><em>{{ getProtocolName(ruleForm.protocolConfigId) }}</em></p>
        </div>
      </div>
      <div class="footer comfirmFoot">
        <span class="pre-step1" @click="handleGo('/pagesA/sign/signCourseList')">返回签约列表</span>
        <span class="pre-step1" @click="goHome">返回首页</span>
        <span class="pre-step1" @click="comfirmPay" v-if="isShowPay">确认支付</span>
      </div>
    </div>
    <navbar title="签约"></navbar>
    <bottom :activePageIndex="1"></bottom>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import bottom from '@/components/bottom/bottom'
import navbar from '@/components/navbar/navbar'
import mySelectCheckbox from '@/components/select/mySelectCheckbox.vue'
import { getStore, setStore } from '@/util/service'
import { courseGetList, dicGet, coachEnabledGet, protocolEnabledGet, memberPageGet, getPayQr, signAdd, confirmPayment } from '@/api/manageApi'
export default {
  components: {
    bottom,
    navbar,
    mySelectCheckbox
  },
  data() {
    return {
      more: 'more',
      rateValue: 5,
      isCheck: true,
      courseList: [],
      activeIndex: 0,
      activeStepIndex: 0,
      value: '',
      range: [],
      saleModeArr: [
        { name: '按次', value: '0' },
        { name: '包时', value: '1' }
      ],
      saleModeIndex: 0,
      buyCountArr: [
        { text: '30天', value: 30 },
        { text: '60天', value: 60 },
        { text: '90天', value: 90 },
        { text: '120天', value: 120 },
        { text: '150天', value: 150 },
        { text: '180天', value: 180 },
        { text: '210天', value: 210 },
        { text: '240天', value: 240 },
        { text: '270天', value: 270 },
        { text: '300天', value: 300 },
        { text: '330天', value: 330 },
        { text: '360天', value: 360 },
      ],
      dateTimeArr: [
        { text: '00:00', value: '00:00' },
        { text: '00:30', value: '00:30' },
        { text: '01:00', value: '01:00' },
        { text: '01:30', value: '01:30' },
        { text: '02:00', value: '02:00' },
        { text: '02:30', value: '02:30' },
        { text: '03:00', value: '03:00' },
        { text: '03:30', value: '03:30' },
        { text: '04:00', value: '04:00' },
        { text: '04:30', value: '04:30' },
        { text: '05:00', value: '05:00' },
        { text: '05:30', value: '05:30' },
        { text: '06:00', value: '00:00' },
        { text: '06:30', value: '06:30' },
        { text: '07:00', value: '07:00' },
        { text: '07:30', value: '07:30' },
        { text: '08:00', value: '08:00' },
        { text: '08:30', value: '08:30' },
        { text: '09:00', value: '09:00' },
        { text: '09:30', value: '09:30' },
        { text: '10:00', value: '10:00' },
        { text: '10:30', value: '10:30' },
        { text: '11:00', value: '11:00' },
        { text: '11:30', value: '11:30' },
        { text: '12:00', value: '12:00' },
        { text: '12:30', value: '12:30' },
        { text: '13:00', value: '13:00' },
        { text: '13:30', value: '13:30' },
        { text: '14:00', value: '14:00' },
        { text: '14:30', value: '14:30' },
        { text: '15:00', value: '15:00' },
        { text: '15:30', value: '15:30' },
        { text: '16:00', value: '16:00' },
        { text: '16:30', value: '16:30' },
        { text: '17:00', value: '17:00' },
        { text: '17:30', value: '17:30' },
        { text: '18:00', value: '18:00' },
        { text: '18:30', value: '18:30' },
        { text: '19:00', value: '19:00' },
        { text: '19:30', value: '19:30' },
        { text: '20:00', value: '20:00' },
        { text: '20:30', value: '20:30' },
        { text: '21:00', value: '21:00' },
        { text: '21:30', value: '21:30' },
        { text: '22:00', value: '22:00' },
        { text: '22:30', value: '22:30' },
        { text: '23:00', value: '23:00' },
        { text: '23:30', value: '23:30' }
      ],
      isMultiple: true,
      payImgArr: [],
      ruleForm: {
        courseId: '',
        courseType: '',
        courseMode: '',
        courseTimes: '',
        buyCount: '',
        payMoney: '',
        maxAttendClassOneDay: '',
        maxFaultTolerantTime: '',
        allowAttendClassStartTime: '',
        allowAttendClassEndTime: '',
        expirationType: '',
        expirationDays: '',
        signCoachUserIdList: [],
        teachCoachUserIdList: [],
        protocolConfigId: '',
        memberUserIdList: [
          {
            phone: '',
            userName: '',
            gender: 1,
            idCard: '',
            emergencyContact: '',
            emergencyContactPhone: ''
          },
          {
            phone: '',
            userName: '',
            gender: 1,
            idCard: '',
            emergencyContact: '',
            emergencyContactPhone: ''
          }
        ]
      },
      courseModeArr: [],
      courseStateArr: [],
      courseTypeArr: [],
      signCourseExpirationTypeArr: [],
      genderArr: [],
      coachArr: [],
      teachCoachArr: [],
      protocolArr: [],
      memberDetail1: {},
      memberDetail2: {},
      disableMember1: false,
      disableMember2: false,
      radio1: 1,
      dialogLoading: false,
      memberData: {},
      signId: '',
      isShowPay: true
    }
  },
  computed: {
    ...mapGetters(['uniToken'])
  },
  onLoad(option) {
    dicGet().then(res => {
      // console.log(res)
      var data = res.data
      data.forEach((item, index) => {
        if (item.dicName == 'CourseMode') {
          this.courseModeArr = item.dicValueList
        }
        if (item.dicName == 'CourseState') {
          this.courseStateArr = item.dicValueList
        }
        if (item.dicName == 'CourseType') {
          this.courseTypeArr = item.dicValueList
        }
        // if (item.dicName == 'CourseSaleMode') {
        //   this.saleModeArr = item.dicValueList
        // }
        if (item.dicName == 'SignCourseExpirationType') {
          this.signCourseExpirationTypeArr = item.dicValueList.map((item, index) => {
            return {
              value: item.dicCode,
              text: item.dicName
            }
          })
          // console.log(this.signCourseExpirationTypeArr)
        }
        if (item.dicName == 'Gender') {
          this.genderArr = item.dicValueList.map((item, index) => {
            return {
              value: item.dicCode,
              text: item.dicName
            }
          })
        }
      })
    })
    this.getCourseList(getStore('coachStoreId'))
    this.getCoachList()
    this.getProtocol()
    this.getPayQrImg()
  },
  methods: {
    setCourseMode(val) {
      if (val === 1) {
        return '1对1'
      } else if (val === 2) {
        return '1对2'
      } else {
        return ''
      }
    },
    changeMember1(e) {
      // console.log(e)
      this.getMember(e.detail.value, 0)
    },
    changeMember2(e) {
      // console.log(e)
      this.getMember(e.detail.value, 1)
    },
    getMember(key, index) {
      var params = {
        current: 1,
        size: 100,
        key: key,
        type: ''
      }
      memberPageGet(params).then(res => {
        // console.log(res)
        if (res.code == '200') {
          var data = res.data.records
          if (data.length === 1) {
            this.memberData = data[0]
            this.$set(this.ruleForm.memberUserIdList[index], 'userName', this.memberData.userName)
            this.$set(this.ruleForm.memberUserIdList[index], 'gender', this.memberData.gender)
            this.$set(this.ruleForm.memberUserIdList[index], 'idCard', this.memberData.idCard)
            this.$set(this.ruleForm.memberUserIdList[index], 'emergencyContact', this.memberData.emergencyContact)
            this.$set(this.ruleForm.memberUserIdList[index], 'emergencyContactPhone', this.memberData.emergencyContactPhone)
            this.$set(this.ruleForm.memberUserIdList[index], 'userId', this.memberData.userId)
            if (index === 0) {
              this.disableMember1 = true
            }
            if (index === 1) {
              this.disableMember2 = true
            }
          } else {
            this.memberData = {}
            this.$set(this.ruleForm.memberUserIdList[index], 'userName', '')
            this.$set(this.ruleForm.memberUserIdList[index], 'gender', '')
            this.$set(this.ruleForm.memberUserIdList[index], 'idCard', '')
            this.$set(this.ruleForm.memberUserIdList[index], 'emergencyContact', '')
            this.$set(this.ruleForm.memberUserIdList[index], 'emergencyContactPhone', '')
            this.$set(this.ruleForm.memberUserIdList[index], 'userId', '')
            if (index === 0) {
              this.disableMember1 = false
            }
            if (index === 1) {
              this.disableMember2 = false
            }
          }
        }
      })
    },
    handleGo(url) {
      this.goUrl(url)
    },
    goHome() {
      this.redirectUrl('/pages/preOrder/preOrderHome')
    },
    getCoachs(idsArr) {
      var nameArr = []
      this.coachArr.forEach((item, index) => {
        if (idsArr.indexOf(item.id) >= 0) {
          nameArr.push(item.userName)
        }
      })
      return nameArr.join()
    },
    getProtocolName(id) {
      var protocolName = ''
      this.protocolArr.forEach((item, index) => {
        if (item.value == id) {
          protocolName = item.text
        }
      })
      return protocolName
    },
    getPayQrImg() {
      getPayQr().then(res => {
        this.payImgArr = res.data
      })
    },
    chooseMember1() {
      var url = '/pagesA/home/selectMemberAll'
      uni.navigateTo({
        url: url,
        events: {
          //获取下级页面传递回来的参数
          sonPageData: data => {
            // console.log(data)
            this.memberDetail1 = data
            this.$set(this.ruleForm.memberUserIdList[0], 'phone', this.memberDetail1.phone)
            this.$set(this.ruleForm.memberUserIdList[0], 'userName', this.memberDetail1.userName)
            this.$set(this.ruleForm.memberUserIdList[0], 'gender', this.memberDetail1.gender)
            this.$set(this.ruleForm.memberUserIdList[0], 'idCard', this.memberDetail1.idCard)
            this.$set(this.ruleForm.memberUserIdList[0], 'emergencyContact', this.memberDetail1.emergencyContact)
            this.$set(this.ruleForm.memberUserIdList[0], 'emergencyContactPhone', this.memberDetail1.emergencyContactPhone)
            this.$set(this.ruleForm.memberUserIdList[0], 'userId', this.memberDetail1.userId)
            if (this.memberDetail1.userId) {
              this.disableMember1 = true
            } else {
              this.disableMember1 = false
            }
          }
        }
      })
    },
    chooseMember2() {
      var url = '/pagesA/home/selectMemberAll'
      uni.navigateTo({
        url: url,
        events: {
          //获取下级页面传递回来的参数
          sonPageData: data => {
            // console.log(data)
            this.memberDetail12 = data
            this.$set(this.ruleForm.memberUserIdList[1], 'phone', this.memberDetail12.phone)
            this.$set(this.ruleForm.memberUserIdList[1], 'userName', this.memberDetail12.userName)
            this.$set(this.ruleForm.memberUserIdList[1], 'gender', this.memberDetail12.gender)
            this.$set(this.ruleForm.memberUserIdList[1], 'idCard', this.memberDetail12.idCard)
            this.$set(this.ruleForm.memberUserIdList[1], 'emergencyContact', this.memberDetail12.emergencyContact)
            this.$set(this.ruleForm.memberUserIdList[1], 'emergencyContactPhone', this.memberDetail12.emergencyContactPhone)
            this.$set(this.ruleForm.memberUserIdList[1], 'userId', this.memberDetail12.userId)
            if (this.memberDetail2.userId) {
              this.disableMember2 = true
            } else {
              this.disableMember2 = false
            }
          }
        }
      })
    },
    radioChange(evt) {
      for (let i = 0; i < this.saleModeArr.length; i++) {
        if (this.saleModeArr[i].value === evt.detail.value) {
          this.saleModeIndex = i
          break
        }
      }
      this.$set(this.ruleForm, 'buyCount', '')
    },
    getCoachList() {
      coachEnabledGet('').then(res => {
        if (res.code == '200') {
          var data = res.data
          this.coachArr = data
        }
      }).catch(err => {
        console.log(err)
      })
    },
    getProtocol() {
      protocolEnabledGet('').then(res => {
        // console.log(res)
        if (res.code == '200') {
          var data = res.data
          this.protocolArr = data.map((item, index) => {
            return {
              value: item.id,
              text: item.protocolName
            }
          })
        }
      })
    },
    // 确认
    confirmDialog() {
      var memberUserIdList = []
      var newMemberUserList = []
      if (this.ruleForm.courseMode === 1 || this.courseList[this.activeIndex].courseType === 0) {
        if (this.ruleForm.memberUserIdList[0].userId != '') {
          memberUserIdList[0] = this.ruleForm.memberUserIdList[0].userId
          newMemberUserList = []
        } else {
          memberUserIdList = []
          newMemberUserList[0] = this.ruleForm.memberUserIdList[0]
        }
      }
      if (this.ruleForm.courseMode === 2) {
        this.ruleForm.memberUserIdList.forEach((item, index) => {
          if (item.userId != '') {
            memberUserIdList.push(item.userId)
          } else {
            newMemberUserList.push(item)
          }
        })
      }
      var params = {
        'id': '',
        'allowAttendClassEndTime': this.ruleForm.allowAttendClassEndTime,
        'allowAttendClassStartTime': this.ruleForm.allowAttendClassStartTime,
        'buyCount': this.ruleForm.buyCount,
        'courseId': this.courseList[this.activeIndex].id,
        'expirationDays': this.ruleForm.expirationDays,
        'expirationType': this.ruleForm.expirationType,
        'maxAttendClassOneDay': this.ruleForm.maxAttendClassOneDay,
        'maxFaultTolerantTime': this.ruleForm.maxFaultTolerantTime,
        'memberUserIdList': memberUserIdList,
        'newMemberUserList': newMemberUserList,
        'payMoney': this.ruleForm.payMoney * 100,
        'protocolConfigId': this.ruleForm.protocolConfigId,
        'saleMode': this.saleModeIndex,
        'signCoachUserIdList': this.ruleForm.signCoachUserIdList,
        'teachCoachUserIdList': this.ruleForm.teachCoachUserIdList
      }
      this.dialogLoading = true
      signAdd(params).then(res => {
        // console.log(res)
        if (res.code == '200') {
          this.uShowToast(res.msg)
          this.nextStep(4)
          this.signId = res.data
        } else {
          this.uShowToast(res.msg)
        }
        this.dialogLoading = false
      })
    },
    changeSaleMode(val) {
      this.$set(this.ruleForm, 'teachCoachUserIdList', '')
      this.$nextTick(() => {
        if (this.saleModeIndex === 0) {
          this.isMultiple = true
        }
        if (this.saleModeIndex === 1) {
          this.isMultiple = false
        }
      })
    },
    change() { },
    nextStep(val) {
      if (val === 1) {
        if (this.courseList.length === 0) {
          this.uShowToast('所选课程不能为空')
          return
        }
      }
      if (val === 2) {
        if (this.ruleForm.buyCount === '') {
          this.uShowToast('购买数量不能为空')
          return
        }
        if (this.ruleForm.payMoney === '') {
          this.uShowToast('支付金额不能为空')
          return
        }
        const reg = /^[1-9]\d*$/
        if (!reg.test(this.ruleForm.buyCount)) {
          this.uShowToast('购买数量值必须是正整数')
          return
        }
        if (this.ruleForm.payMoney < 0) {
          this.uShowToast('支付金额不能小于0')
          return
        }
        if (this.ruleForm.courseType === 1) {
          if (this.ruleForm.maxAttendClassOneDay === '') {
            this.uShowToast('每日约课限制')
            return
          }
          if (!reg.test(this.ruleForm.maxAttendClassOneDay)) {
            this.uShowToast('每日约课限制值必须是正整数')
            return
          }
          // if(this.ruleForm.allowAttendClassStartTime === ''){
          //   this.uShowToast('允许约课开始时间不能为空')
          //   return
          // }
          // if(this.ruleForm.allowAttendClassStartTime === ''){
          //   this.uShowToast('允许约课结束时间不能为空')
          //   return
          // }
        }
        if (this.ruleForm.courseType === 0 && this.saleModeIndex === 0) {
          if (this.ruleForm.maxFaultTolerantTime === '') {
            this.uShowToast('最大门禁容错时间不能为空')
            return
          }
        }

        if (this.ruleForm.expirationType === '') {
          this.uShowToast('课程开始时间不能为空')
          return
        }
        if (this.saleModeIndex === 0) {
          if (this.ruleForm.expirationDays == '') {
            this.uShowToast('课程结束时间不能为空')
            return
          }
          if (!reg.test(this.ruleForm.expirationDays)) {
            this.uShowToast('课程结束时间值必须是正整数')
            return
          }
        }
        if (this.ruleForm.courseType === 1) {
          if (this.ruleForm.teachCoachUserIdList.length === 0) {
            this.uShowToast('授课教练不能为空')
            return
          }
          if (this.saleModeIndex === 1) {
            if (this.ruleForm.teachCoachUserIdList.length > 1) {
              this.uShowToast('包时授课教练只能选一个')
              return
            }
          }
        }
      }
      if (val === 3) {
        if (this.ruleForm.courseMode === 1 || this.ruleForm.courseType === 0) {
          if (this.ruleForm.memberUserIdList[0].phone === '') {
            this.uShowToast('会员甲手机号不能为空')
            return
          }
          if (this.ruleForm.memberUserIdList[0].userName === '') {
            this.uShowToast('会员甲用户名不能为空')
            return
          }
        }
        if (this.ruleForm.courseMode === 2) {
          if (this.ruleForm.memberUserIdList[0].phone === '') {
            this.uShowToast('会员甲手机号不能为空')
            return
          }
          if (this.ruleForm.memberUserIdList[0].userName === '') {
            this.uShowToast('会员甲用户名不能为空')
            return
          }
          if (this.ruleForm.memberUserIdList[1].phone === '') {
            this.uShowToast('会员乙手机号不能为空')
            return
          }
          if (this.ruleForm.memberUserIdList[1].userName === '') {
            this.uShowToast('会员乙用户名不能为空')
            return
          }
        }
      }
      this.activeStepIndex = val
    },
    changeIndex(index) {
      this.activeIndex = index
      // console.log()
      var item = this.courseList[this.activeIndex]
      this.$set(this.ruleForm, 'courseType', item.courseType)
      this.$set(this.ruleForm, 'courseMode', item.courseMode)
      this.$set(this.ruleForm, 'courseTimes', item.courseTimes)
      this.teachCoachArr = item.coachList
      // console.log(this.teachCoachArr)
    },
    // 获取推荐课程列表
    getCourseList(storeId) {
      var params = {
        current: 1,
        size: 1000,
        storeId: storeId,
        courseState: 1,
        freeCourse: true
      }
      courseGetList(params).then(res => {
        // console.log(res)
        if (res.code == '200') {
          var data = res.data
          this.courseList = data
          if (data.length > 0) {
            var item = this.courseList[this.activeIndex]
            this.$set(this.ruleForm, 'courseType', item.courseType)
            this.$set(this.ruleForm, 'courseMode', item.courseMode)
            this.$set(this.ruleForm, 'courseTimes', item.courseTimes)
            this.teachCoachArr = item.coachList
          }
        }
      })
    },
    comfirmPay() {
      this.uShowModel('确认', '确定要确认支付吗', () => {
        var params = {
          signCourseId: this.signId
        }
        confirmPayment(params).then(res => {
          if (res.code == '200') {
            this.uShowToast(res.msg)
            this.isShowPay = false
            // this.goUrl('/pagesA/sign/signCourseList')
          }
        })
      })
    }
  }
}
</script>

<style lang="scss">
.signing {
  padding-top: 160rpx;
  padding-bottom: 300rpx;

  .page1 {
    width: 702rpx;
    margin: 0 auto;
  }

  h1 {
    font-weight: 400;
    font-size: 30rpx;
    color: #575757;
    margin: 31rpx 0 24rpx;
  }

  .radio-sale {
    width: 702rpx;
    height: 128rpx;
    background: #FFFFFF;
    border-radius: 20rpx;
    padding: 24rpx 28rpx;
    box-sizing: border-box;

    .radio1 {
      width: 308rpx;
      height: 80rpx;
      line-height: 80rpx;
      background: url('../../static/s1.png') no-repeat 0 0;
      background-size: cover;
      display: inline-block;
      text-align: center;
      margin-right: 30rpx;
    }

    .radio2 {
      width: 308rpx;
      height: 80rpx;
      line-height: 80rpx;
      background: url('../../static/s2.png') no-repeat 0 0;
      background-size: cover;
      display: inline-block;
      text-align: center;
    }
  }

  .list-course {
    width: 100%;

    li {
      width: 100%;
      // height: 294rpx;
      background: #FFFFFF;
      border-radius: 20rpx;
      box-sizing: border-box;
      padding: 30rpx 28rpx;
      margin-top: 24rpx;
      position: relative;

      .course-body {
        display: flex;

        .cover {
          width: 220rpx;
          height: 174rpx;
          line-height: 174rpx;
          background: #fafafa;
          border-radius: 15rpx;
          margin-right: 20rpx;

          img {
            max-width: 100%;
            max-height: 100%;
            vertical-align: middle;
            border-radius: 15rpx;
          }
        }

        .course-info {
          font-size: 24rpx;
          color: #838383;
          line-height: 50rpx;

          h4 {
            margin-top: 10rpx;
            margin-bottom: 6rpx;
            font-size: 30rpx;
            color: #1E1E1E;
          }
        }
      }
    }

    li.active::after {
      content: '';
      position: absolute;
      right: 0;
      top: 0;
      width: 52rpx;
      height: 52rpx;
      display: inline-block;
      background: url('../../static/s3.png') no-repeat 0 0;
      background-size: cover;
    }
  }

  .footer {
    width: 750rpx;
    height: 128rpx;
    background: #FFFFFF;
    text-align: center;
    position: fixed;
    left: 0;
    bottom: 104rpx;

    span {
      margin-top: 24rpx;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      display: inline-block;
      border-radius: 40rpx;
      background: #FF5D3D;
      font-size: 32rpx;
      color: #FFFFFF;
    }

    .next {
      width: 646rpx;
    }

    .pre-step {
      width: 328rpx;
      background: #FFFFFF;
      border: 1px solid #FF5A20;
      color: #FF5A20;
      margin-right: 30rpx;
    }

    .pre-step1 {
      width: 250rpx;
      background: #FFFFFF;
      border: 1px solid #FF5A20;
      color: #FF5A20;
      margin: 0 10rpx;
    }

    .next-step {
      width: 328rpx;
    }
  }

  .comfirmFoot {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .page2,
  .page3,
  .page4,
  .page5 {
    h1 {
      text-indent: 34rpx;
    }

    .sec-title {
      width: 750rpx;
      height: 100rpx;
      line-height: 100rpx;
      text-indent: 31rpx;
      position: relative;
      background: #fff;
      border-bottom: 1px solid #eee;

      span {
        display: inline-block;
        width: 180rpx;
        height: 48rpx;
        background: #FFFFFF;
        border-radius: 24rpx;
        border: 1px solid #FFBF40;
        line-height: 48rpx;
        text-align: center;
        font-size: 22rpx;
        color: #F6A51F;
        position: absolute;
        right: 32rpx;
        top: 26rpx;
        text-indent: 0rpx;
      }
    }
  }

  .fr {
    float: right;
  }

  .micon-1 {
    width: 10rpx;
    height: 18rpx;
    display: inline-block;
    background: url(../../static/right2.png) no-repeat 0 0;
    background-size: cover;
    margin-left: 20rpx;
  }

  .list-base {
    margin-bottom: 24rpx;

    li {
      width: 750rpx;
      height: 100rpx;
      background: #FFFFFF;
      line-height: 100rpx;
      font-size: 30rpx;
      color: #1E1E1E;
      padding: 0 32rpx;
      box-sizing: border-box;

      p {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      span {
        font-size: 28rpx;
        color: #1E1E1E;
        display: inline-block;
        width: 176rpx;
        margin-right: 10rpx;
      }

      .uni-input {
        width: 420rpx;
        font-size: 28rpx;
        color: #838383;
        text-align: right;
      }

      em {
        margin-left: 10rpx;
        font-size: 28rpx;
        color: #838383;
      }
    }
  }

  .contract {
    width: 702rpx;
    // height: 1034rpx;
    background: #FFFFFF;
    border-radius: 20rpx;
    margin: 0 auto;

    .contract-top {
      padding: 40rpx 31rpx;
      line-height: 58rpx;
      border-bottom: 1px solid #eee;

      p {
        display: flex;
      }

      span {
        width: 255rpx;
        margin-right: 49rpx;
        display: inline-block;
        font-size: 28rpx;
        color: #838383;
        display: inline-block;
      }

      em {
        font-size: 28rpx;
        color: #1E1E1E;
      }
    }

    .contract-bottom {
      padding: 38rpx 20rpx;

      h4 {
        font-weight: 400;
        font-size: 28rpx;
        color: #838383;
        margin-bottom: 15rpx;
      }

      .member {
        width: 662rpx;
        height: 286rpx;
        background: #F7F7F7;
        border-radius: 20rpx;
        padding: 42rpx 28rpx;
        box-sizing: border-box;
        line-height: 58rpx;

        p {
          display: flex;
        }

        span {
          width: 160rpx;
          display: inline-block;
          margin-right: 80rpx;
          font-size: 28rpx;
          color: #838383;
        }

        em {
          font-size: 28rpx;
          color: #1E1E1E;
        }
      }
    }
  }

  .page5 {
    .contract {
      margin-top: 24rpx;

      .contract-top {
        border-bottom: none;
      }
    }

    .top-banner {
      width: 702rpx;
      height: 60rpx;
      margin: 24rpx auto 0;
      background: url('../../static/s4.png') no-repeat 0 0;
      background-size: cover;
    }

    .qr-code {
      width: 702rpx;
      height: 402rpx;
      background: #FFFFFF;
      border-radius: 0rpx 0rpx 20rpx 20rpx;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        max-width: 234rpx;
        margin-right: 40rpx;
        max-height: 318rpx;
      }
    }
  }
}
</style>
